import React, { useState, useRef, useEffect } from 'react'
import { NavLink, useNavigate } from 'react-router-dom'
import {
    Button, Toast, FloatingPanel,
    SearchBar,
    Avatar,
    Space,
    Card,
    List,
} from 'antd-mobile'
import {
    LeftOutline,
    GiftOutline,
    SoundOutline,
    GlobalOutline,
    EnvironmentOutline,
} from 'antd-mobile-icons'
import './map.scss'
import API from '../api/address'
import { store } from '../../store'
import { IAddress } from '../../interface'
import { SET_ADDRESS } from '../../store/actionType'
import { useDispatch , useSelector} from 'react-redux'

export default function Map() {
    const navigate = useNavigate()
    const dispatch = useDispatch()
    const {addressReducer} = useSelector((state:any)=>state)

    const anchors = [72, 72 + 119, window.innerHeight * 0.8]

    const [focus, setFocus] = useState(false)
    const ref = useRef<any>(null)
    const { _id, token } = store.getState().userReducer.user
    const [address, setAddress] = useState<IAddress[]>([])
    const getAddress = async () => {
        let res = await API['getAddress']({ _id, token })
        console.log(res, '获取地址')
        setAddress(res.data.data)
    }
    useEffect(() => {
        getAddress()
    }, [])
    return (
        <div>
            <div className='map_back'>
                <Button onClick={() => navigate(-1)}><LeftOutline /></Button>
                选择收货地址
                <aside onClick={() => navigate('/pushAddress')}>新增地址</aside>
            </div>
            <div className='map_s'>
                <iframe src='https://amap.com' className='map' />
            </div>
            <div className='map_foot'>
                <hgroup>当前地址</hgroup>
                <div className='location'>
                    <NavLink to={'/'}>
                        <i><EnvironmentOutline /></i>
                        <h2>{addressReducer.address}</h2>
                    </NavLink>
                </div>
                <hgroup>我的收货地址</hgroup>
                {
                    address.map((item: IAddress) => <div className='location' key={item._id} onClick={()=>(dispatch({type:SET_ADDRESS,payload:item.address_city +item.address_town}))}>
                        <NavLink to={'/'}>
                            <i><EnvironmentOutline /></i>
                            <h2>{item.address_city} {item.address_town}</h2>
                        </NavLink>
                        <aside>{item.address_contacts} {item.address_phone}</aside>
                    </div>)
                }
            </div>
        </div>
    )
}
